<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" 
           uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>CartShop</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/zxy/headAndFoot.css" />
		<link rel="stylesheet" type="text/css" href="css/zxy/cartShop/cartShop.css" />
		<script src="lib/jquery-3.3.1.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		<script src="lib/vue.js"></script>
		<script src="js/zxy/headAndFoot/headAndFoot.js"></script>
		<script src="js/zxy/cartShop/cartShop.js"></script>
	</head>

	<body>
		<div id="all">
			<div id="topAdv"><a href="#"><img src="img/zxy/headAndFoot/topAdv.jpg"></a><div onClick="closeAdv()" id="closeAdv">X</div></div>
			<div id="head">
				<div id="headBox">
					<div id="headTop">
						<ul id="topLeft">
							<li class="topLeftLi"><a href="#">首页</a></li>
							<li class="topLeftLi"><a href="#">华为官网</a></li>
							<li class="topLeftLi"><a href="#">荣耀官网</a></li>
							<li class="topLeftLi"><a href="#">花粉俱乐部</a></li>
							<li class="topLeftLi"><a href="#">帮助中心</a></li>
							<li class="topLeftLi"><a href="#">V 码 (优购码)</a></li>
							<li class="topLeftLi"><a href="#">首企业购页</a></li>
							<li class="topLeftLi"><a href="#">Select Region</a></li>
							<li class="topLeftLi" id="qrcode"><a href="#">下载 APP<span class="caret"></span></a>
								<div >
									<img src="img/zxy/headAndFoot/qrcode.png"/>
									<p>扫一扫，下载客户端</p>
								</div>
							</li>
							<li class="topLeftLi" id="more"><a href="#">更多精彩<span class="caret"></span></a>
								<ul >
									<div><a href="#">EMUI</a></div>
									<div><a href="#">应用市场</a></div>
									<div><a href="#">华为终端云空间</a></div>
									<div><a href="#">开发者联盟</a></div>
								</ul>
						   </li>
						</ul>
						<ul id="topRight">
							<li class="topRightLi">
								<div id="loged" v-if="ifLogin">
									<a href="#">userName</a>
									<div id="userDrop">
										<div id="userInfo">
											<div id="userLeft">
												<a href="#"><img src="img/zxy/headAndFoot/img_logged_in.png" width="90px" height="90px"/></a>
											</div>
											<div id="userRight">
												<p><a>userName</a></p>
												<a href="#" class="realName"><span></span>未实名</a>
												<a href="#" class="i-mail"><span></span>站内信</a>
											</div>
										</div>
										<div id="userOrder">
											我的订单
											<a href="#">更多 ></a>
										</div>
										<div id="orderList">
											<ul>
												<li><a href="#">待支付</a></li>
												<li><a href="#">待收货</a></li>
												<li><a href="#">待评价</a></li>
												<li><a href="#">退换货</a></li>
												<li><a href="#">旧机回收</a></li>
											</ul>
										</div>
										<div id="otherInfo">
											<div class="discount">
												<a href="#"><span class="img01"></span></a>
												<p class="points">积分</p>
												<span>0分</span>
											</div>
											<div class="discount">
												<a href="#"><span class="img02"></span></a>
												<p class="points">优惠券</p>
												<span>0张</span>
											</div>
											<div class="discount">
												<a href="#"><span class="img03"></span></a>
												<p class="points">代金券</p>
												<span>0.00元</span>
											</div>
										</div>
										<div id="logout"><a href="#">退出登录</a></div>
									</div>
								</div>
								<div id="unlogin" v-else>
									<a href="#">请登录</a>
									<a href="#">注册</a>
								</div>
							</li>
							<li class="topRightLi" id="myOrder">
								<a href="#">我的订单</a>
							</li>
							<li class="topRightLi" id="cartShop">
								<a href="#">
									<span class="cartImg"></span>
									购物车(<font id="cartShopNum">0</font>)
								</a>
								<div class="miniCart" id="emptyCart" v-if="ifEmpty">
									<img src="img/zxy/headAndFoot/空购物车.png" width="100px" height="100px"/>
									<p>您的购物车是空的，赶紧选购吧~</p>
								</div>
								<div class="miniCart" id="cartShopBox" v-else>
									<ul class="cartShopBoxUl">
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										
									</ul>
									<div id="minicartBalance">
										<p>
											<span>总计:</span>
											<font>¥ 15043.00</font>
										</p>
										<a href="#">立即结算</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div id="cartShopBar">
						<div id="cartShopLeft">
							<a href="Main"><img src="img/zxy/cartShop/logo.png"/></a>
							<span>我的购物车</span>
						</div>
						<div id="cartShopRight"></div>
					</div>
				</div>
			</div>

			<div id="page">
				<div id="pageContent">
					<div id="cartTitle">
						<div id="selectAll">
							<label class="selectLabel">
								<input v-model="ifCheckAll"  @click="checkAll" name="checkAllBox" type="checkbox" class="selectBtn"/>
								<span></span>
								<font>全选</font>
							</label>
						</div>
						<ul >
							<li>商品</li>
							<li>单价</li>
							<li>数量</li>
							<li>小计</li>
							<li>操作</li>
						</ul>
					</div>
					<div id="cartBox">
						<div class="emptyCart" v-if="ifEmpty==1">
							<span class="iconEmpty"></span>
							<p>您的购物车里什么也没有哦~</p>
							<a href="Main">去逛逛</a>
						</div>
						<div v-else v-for="(goods,index) in goodsList" class="itemInfo">
							<div class="itemSelect">
								<label class="selectLabel">
									<input name="checkBox" v-model="checked" :value="goods" type="checkbox" class="selectBtn"/>
									<span></span>
								</label>
							</div>
							<div class="itemImg">
								<a href="#">
									<img width="100px" height="100px" v-bind:src="goods.goodsImg"/>
								</a>
							</div>
							<div class="itemName">
								<a href="#">
									{{goods.name}}
								</a>
							</div>
							<div class="itemPrice">
								<p v-if="goods.discountPrice>0" class="newPrice">¥{{goods.price-goods.discountPrice}}</p>
								<p v-if="goods.discountPrice>0" class="oldPrice">¥{{goods.price}}</p>
								<p v-else= class="newPrice">¥{{goods.price}}</p>
							</div>
							<div class="itemNum">
								<input type="text" class="stockText" v-on:blur="checkNum(index,goods.goodsNum)" v-model.number.lazy:value="goods.goodsNum"/>
								<div class="stockBtn">
									<a href="javascript:void(0);" @click="addGoods(index)" class="addProduct">+</a>
									<a href="javascript:void(0);" @click="reduceGoods(index)" class="minusProduct">-</a>
								</div>
								<span v-if="goods.goodsNum==goods.count" 
									v-bind:style="{fontSize:'1px',color:'#CA141D'}">最大库存数量</span>
							</div>
							<div class="priceTotal">
								<p>¥{{subTotle(goods.price,goods.discountPrice,goods.goodsNum)}}</p>
								<p v-if="goods.discountPrice>0" class="savePrice">省¥ {{discountSubTotle(goods.price,goods.discountPrice,goods.goodsNum)}} </p>
							</div>
							<div class="deleteItem">
								<a href="javascript:void(0);"  @click="deleteGoods(index)">删除</a>
							</div>
						</div>
					</div>
					<div>{{checked}}</div>
					<!-- <form id="goodsListForm" action="OrderConfirm" method="post">
						<input name="goodsListLength" v-model:value="checked.length"/>
						<div  v-for="(item,key) in checked" >
							<input type="text" v-bind:name="key" v-model:value="[key+'goodsid']"/>
							<input type="text" v-bind:name="goodsList[key].goodsid" v-model:value="item.goodsid" />
							<input type="text" v-bind:name="goodsList[key].goodsName" v-model:value="item.name" />
							<input type="text" v-bind:name="goodsList[key].goodsNum" v-model:value="item.goodsNum" />
							<input type="text" v-bind:name="goodsList[key].price" v-model:value="item.price" />
							<input type="text" v-bind:name="goodsList[key].goodsImg" v-model:value="item.goodsImg" />
							<input type="text" v-bind:name="goodsList[key].discountPrice" v-model:value="item.discountPrice" />
						</div>
						<input type="submit" value="submit">
					</form> -->
					<div id="countBox">
						<div id="selectAll2">
							<label class="selectLabel">
								<input  v-model="ifCheckAll"  @click="checkAll" type="checkbox" class="selectBtn"/>
								<span></span>
								<font>全选</font>
							</label>
							<a href="javascript:void(0);"  @click="deleteSelectGoods()">删除</a>
						</div>
						<div id="countMsg">
							<a href="javascript:void(0);" v-on:click="getBalance" id="countBtn">立即结算</a>
							<div id="countInfo">
								<p>总计：   <font v-model="totlePrice" id="countPrice">¥{{totlePrice}}</font></p>
								<p>已选择 <font v-model="selectNum" id="countNum">{{selectNum}}</font> 件商品，优惠： <font v-model="selectDiscount" id="countSave">¥{{selectDiscount}}</font></p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div id="foot">
				<div id="footBox">
					<div id="footTop">
						<div>
							<a href="#">
								<span class="slogan1"></span>
								<span>百强企业 品质保证</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan2"></span>
								<span>7 天退货 15 天换货</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan3"></span>
								<span>48 元起免运费</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan4"></span>
								<span>448 家维修网点 全国联保</span>
							</a>
						</div>
					</div>
					<div id="footMid">
						<div class="footList">
							<ul>
								<p>购物相关</p>
								<li>
									<a href="#">购物指南</a>
								</li>
								<li>
									<a href="#">配送方式</a>
								</li>
								<li>
									<a href="#">支付方式</a>
								</li>
								<li>
									<a href="#">常见问题</a>
								</li>
							</ul>
							<ul>
								<p>保修与退换货</p>
								<li>
									<a href="#">保修政策</a>
								</li>
								<li>
									<a href="#">退换货政策</a>
								</li>
								<li>
									<a href="#">退换货流程</a>
								</li>
								<li>
									<a href="#">保修状态查询</a>
								</li>
								<li>
									<a href="#">配件防伪查询</a>
								</li>
							</ul>
							<ul>
								<p>维修与技术支持</p>
								<li>
									<a href="#">售后网点</a>
								</li>
								<li>
									<a href="#">预约维修</a>
								</li>
								<li>
									<a href="#">手机寄修</a>
								</li>
								<li>
									<a href="#">备件价格查询</a>
								</li>
								<li>
									<a href="#">上门服务</a>
								</li>
							</ul>
							<ul>
								<p>关于我们</p>
								<li>
									<a href="#">公司介绍</a>
								</li>
								<li>
									<a href="#">华为商城简介</a>
								</li>
								<li>
									<a href="#">华为线下门店</a>
								</li>
								<li>
									<a href="#">荣耀线下门店</a>
								</li>
								<li>
									<a href="#">诚征英才</a>
								</li>
							</ul>
							<ul>
								<p>关注我们</p>
								<li>
									<a href="#">新浪微博</a>
								</li>
								<li>
									<a href="#">腾讯微博</a>
								</li>
								<li>
									<a href="#">花粉俱乐部</a>
								</li>
							</ul>
							<ul>
								<p>友情链接</p>
								<li>
									<a href="#">华为官网</a>
								</li>
								<li>
									<a href="#">华为商城手机版</a>
								</li>
								<li>
									<a href="#">荣耀官网</a>
								</li>
								<li>
									<a href="#">花粉俱乐部</a>
								</li>
								<li>
									<a href="#">网站地图</a>
								</li>
							</ul>

						</div>
						<div class="serviceTel">
							<p>400-088-6888</p>
							<span>24 小时客服热线（仅收市话费）</span>
							<a>
								<div>
									<font>在线客服</font>
								</div>
							</a>
						</div>
					</div>
					<div id="footBottom">
						<div id="copyright">
							<div id="copyrightLeft"><a href="#"><div></div></a></div>
							<div id="copyrightMid">
								<p><a>隐私声明</a> <a>服务协议</a> Copyright © 2012-2018 华为软件技术有限公司 版权所有 保留一切权利</p>
								<p>公安备案 苏公网安备 32011402010009 号 | 苏 ICP 备 17040376 号 - 6 | 增值电信业务经营许可证：苏 B2-20130048 号 |</p>
							</div>
							<div id="copyrightLogo">
								<a href="#"><img src="img/zxy/headAndFoot/copyright1.jpg"  width="70px" height="24px"/></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright2.png"  width="70px" height="24px"/></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright3.png"  width="70px" height="24px" /></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright4.png"  width="70px" height="24px" /></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--获取隐式对象  -->
		<span 
			data-iflogin="${ifLogin }" 
			data-ifempty="${ifEmpty }" 
			data-userid="${user.userid }" 
			data-usertel="${user.tel }" 
			id="getData" style="display:none">
		</span>
		
		<script>
			//获取request中的购物车商品信息
			var cartListStr='${requestScope.cartListStr}';
			console.log("cartListStr:"+cartListStr);
			var cartList=$.parseJSON(cartListStr);
			console.log(cartList);
			var userid=cartList.userid;
			console.log("userid:"+userid);
			var ifEmpty=cartList.ifEmpty;
			console.log("ifEmpty:"+ifEmpty);
			var goodsList=cartList.goodsList;
			console.log("goodsList:"+goodsList);
			var page=new Vue({
				el:"#page",
				data:{
					userid:userid,
					ifEmpty:ifEmpty,
					goodsList:goodsList,
					disableClasspointerEvents:"none",
					checked:[],
					ifCheckAll:false,
				},
				computed:{
					totlePrice:function(){
						var totle=0;
						this.checked.forEach(function (goods) {
							totle+=(goods.price-goods.discountPrice)*goods.goodsNum;
						});
						return totle;
					},
					selectNum:function(){
						return this.checked.length;
					},
					selectDiscount:function(){
						var totleDiscount=0;
						this.checked.forEach(function (goods) {
							totleDiscount+=goods.discountPrice*goods.goodsNum;
						});
						return totleDiscount;
					},
				},
				watch:{
					checked:function(){
						if(this.checked.length === this.goodsList.length){
							this.ifCheckAll = true;
						}
						else{
							this.ifCheckAll = false;
						}
					},
				},
				methods:{
					getBalance:function(){
						if(this.checked.length==0){
							return;
						}
						//jQuery("#goodsListForm").submit();
						var goodsListStr=JSON.stringify(this.checked);
						console.log(goodsListStr);
						goodsListStr = encodeURI(goodsListStr); //编码
						location.href="OrderConfirm?goodsList="+goodsListStr; 
					},
					subTotle:function(price,discountPrice,goodsNum){
						return (price-discountPrice)*goodsNum;
					},
					discountSubTotle:function(price,discountPrice,goodsNum){
						return discountPrice*goodsNum;
					},
					checkAll: function () {
						 var _this = this
						if (this.ifCheckAll) {
						// 实现反选
							this.checked = []
						} else {
						// 实现全选
							this.checked = []
							this.goodsList.forEach(function (goods) {
								_this.checked.push(goods)
							})
						}
						if (this.checked.length === this.goodsList.length) {
							this.ifCheckAll = true
						console.log(this.ifCheckAll)
						console.log(this.checked)
						}
					},
					reduceGoods:function(index){
						if(this.goodsList[index].goodsNum <= 1) return;
						this.goodsList[index].goodsNum--;
						this.updateNum(index,this.goodsList[index].goodsNum);
					},
					addGoods: function(index){
						if(this.goodsList[index].goodsNum == this.goodsList[index].count){
							return;
						}
						this.goodsList[index].goodsNum++;
						this.updateNum(index,this.goodsList[index].goodsNum);
					},
					checkNum:function(index,val){
						if(val === "" || val ==null||val<=0){
					        this.goodsList[index].goodsNum=1;
					        return;
					    }
					    if(!isNaN(val)){
					    	if(val>this.goodsList[index].count){
						        this.goodsList[index].goodsNum=this.goodsList[index].count;
					    	}
					    	this.updateNum(index,val);
					        return;
					    }
					    else{
					    	this.goodsList[index].goodsNum=1;
					        return;
					    }
					},
					updateNum: function(index,value){
						if(value>this.goodsList[index].count||value==0) return;
						$.ajax({
							type:"POST",
							url:"CartShop?method=updateNum",
							data:{
								goodsid:this.goodsList[index].goodsid,
								goodsNum:value,
							},
							success:function(data){
								if(data=="1"){
									continue;
								}
								else{
									alert("修改数量失败!");
								}
							},
							error:function(){
								alert("error");
							},
						});
						this.goodsList[index].goodsNum=value;
					},
					deleteGoods: function(index){
						if(confirm("确认删除吗？"+this.goodsList[index].goodsid+":"+this.goodsList[index].name)){
							$.ajax({
								type:"POST",
								url:"CartShop?method=deleteGoods",
								data:{
									goodsid:this.goodsList[index].goodsid,
								},
								success:function(data){
									if(data=="1"){
										alert("成功删除!");
									}
									else{
										alert("删除失败!");
									}
								},
								error:function(){
									alert("error");
								},
							});
							this.goodsList.splice(index,1);
						}
					},
					deleteSelectGoods: function(){
						if(confirm("确认删除这"+this.checked.length+"件商品吗")){
							this.checked.forEach(function (goods) {
								$.ajax({
									type:"POST",
									url:"CartShop?method=deleteGoods",
									data:{
										goodsid:goods.goodsid,
									},
									success:function(data){
										if(data=="1"){
											continue;
										}
										else{
											alert("删除失败!");
										}
									},
									error:function(){
										alert("error");
									},
								});
								for(var i=0;i<goodsList.length;i++){
									if(goods.goodsid=goodsList[i].goodsid){
										this.goodsList.splice(i,1);
									}
								}
							});
							this.checked = []
							alert("删除成功!");
							
						}
					},
				},
			});
			
			/* <div id="cartBox">
			<div v-for="goods in goodsList" class="itemInfo">
				<div class="itemSelect">
					<label class="selectLabel">
						<input type="checkbox" class="selectBtn"/>
						<span></span>
					</label>
				</div>
				<div class="itemImg">
					<a href="#">
						<img v-bind:src="goods.goodsImg"/>
					</a>
				</div>
				<div class="itemName">
					<a href="#">
						{{goods.name}}
					</a>
				</div>
				<div class="itemPrice">
					<p v-if="discountprice>0" class="newPrice">{{goods.price-goods.discountPrice}}</p>
					<p v-if="discountprice>0" class="oldPrice">{{goods.price}}</p>
					<p v-else= class="newPrice">{{goods.price}}</p>
				</div>
				<div class="itemNum">
					<input type="text" class="stockText" value="goods.goodsNum"/>
					<div class="stockBtn">
					<a href="#" class="addProduct">+</a>
					<a href="#" class="minusProduct">-</a>
				</div>
				</div>
				<div class="priceTotal">
					<p>{{subTotle(goods.price,goods.discountPrice,goods.goodsNum)}}</p>
					<p v-if="discountprice>0" class="savePrice">省¥ {{discountSubTotle(goods.price,goods.discountPrice,goods.goodsNum)}}</p>
				</div>
				<div class="deleteItem">
					<a href="#">删除</a>
				</div>
			</div> */
		</script>
	</body>
</html>